<template>
    <p>插值</p>
    <p>a:{{ a }}</p>
    <div v-html="spanHtml"></div>

    <p>v-bing</p>
    <img src="//www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" />
    <img v-bind:src="imgUrl" >
    <img :src="imgUrl" />

    <p>v-on</p>
    <el-button type="primary" @click="addOne">Primary</el-button>

    <p>v-if</p>
    <p v-if="isOK">v-if-isOK-ture</p>
    <p v-else>v-if-isOK-false</p>
    <p v-show="isOK">v-if-show-ture</p>


    <el-button type="primary" @click="switchIsOK">Primary</el-button>

    <p v-if="count==1">1</p>
    <p v-else-if="count==2">2</p>
    <p v-else="count==3">3</p>
    
    <el-button type="primary" @click="changeCount(1)">1</el-button>
    <el-button type="primary" @click="changeCount(2)">2</el-button>
    <el-button type="primary" @click="changeCount(3)">3</el-button>

    <p>v-for</p>
    <p v-for="item in todosArr">{{ item }}</p>

    <p v-for="(value,key,index) in todosObj">{{ key }}-{{ value }}-{{ index }}</p>

</template>

<script setup>
import {ref} from 'vue'
   const a = ref('0')
   const spanHtml=ref('<span>这是一个span标签</span>')

   const imgUrl=ref('//www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png')

   const isOK=ref('ture')

   const count = ref(1)

   const todosArr = ref([
    '睡觉',
    '睡觉',
    '睡觉',
    '睡觉',
    '还是睡觉'
   ])

   const todosObj = ref({
    '8:':'睡觉',
    '9:':'睡觉',
    '10:':'睡觉',
    '11:':'睡觉',
    '12:':'还是睡觉',
   }
    
   )

   const addOne= () => {
    a.value++
   }
   
   const switchIsOK = () =>{
    isOK.value=!isOK.value
   }
   
   const changeCount=(num)=>{
    count.value=num
   }
</script>